<template>
  <div style="background-color: #f8f8f8;font-family: 'Microsoft Himalaya'">
    <img class="img1" src="../img/15507424341.jpg"/>
    <div style="height: 214px;" class="border bgClass">
        <div class="col-xs-3 text-center" v-for="v in topBtn">
          <img :src="v.imgUrl" style="margin-top: 20px"/>
          <p style="font-size: 28px;margin-top: 18px;">{{v.text}}</p>
        </div>
    </div>
    <div style="height: 168px;margin-top:18px;" class="border bgClass">
      <div class="col-xs-4 text-center" v-for="v in topBtn2">
        <img :src="v.imgUrl" style="margin-top: 30px"/>
        <p style="font-size: 28px;margin-top: 20px;">{{v.text}}</p>
      </div>
    </div>
    <div style="height: 190px;padding-top: 10px;">
      <div class="bgClass" style="height: 148px;margin-top: 20px;border-radius: 100px;border: 1px solid #d0d0ce;display: flex;background: linear-gradient( #e2f1fd,white );">
        <img src="../img/2-1.jpg" style="margin-left: 39px;margin-top: 30px;margin-bottom: 30px;"/>
        <div style="margin-left: 35px;font-size: 28px;margin-top: 29px;">
          <p>用药时间：08：30（3-12，星期一）</p>
          <p>阿司匹林：1片/次、口服、饭后，</p>
        </div>
        <p style="line-height: 148px;font-size: 28px;margin-left: 35px;color: #4b9bd3;">详情</p>

      </div>
    </div>
    <div style="height: 311px;margin-top: 18px" class="bgClass">
      <div class="col-xs-6" style="padding: 0">
        <div style="height: 157px;" class="border">
          <img src="../img/3-1.jpg" style="margin-top: 16px;margin-left: 30px;display: inline-block;"/>
          <div style="display: inline-block;vertical-align: middle;margin-left: 20px;">
            <p style="color: #f07745;">快问快答</p>
            <p style="font-size: 21px;">快速问诊 及时响应</p>
          </div>
        </div>
        <div style="height: 157px" class="border">
          <img src="../img/3-2.jpg" style="margin-top: 16px;margin-left: 12px;display: inline-block;"/>
          <div style="display: inline-block;vertical-align: middle;margin-left: 20px;">
            <p style="color: #f07745;">用药咨询</p>
            <p style="font-size: 21px;">慈善赠药 讯息汇总</p>
          </div>
        </div>
      </div>
      <div class="col-xs-6 text-center" style="padding: 0;border: 1px solid #d0d0ce;height: 314px">
        <img src="../img/3-3.jpg"style="margin-top: 29px;"/>
        <div style="margin-top: 20px;">
          <p style="color: #5997db;line-height: 40px;display: inline-block">找专家</p>
          <div style="height: 40px;border: 1px solid #cfa359;border-radius: 50px;width: 80px;display: inline-block;font-size: 28px;color: #cfa359;line-height: 40px;">HOT</div>
        </div>
        <p style="font-size: 21px;">三甲名医 在线服务</p>
      </div>
    </div>
    <div style="height: 70px;margin-top: 18px;padding-top: 15px;" class="border bgClass">
      <p style="border-left: 3px solid #5997db;margin-left: 30px;padding-left: 10px;display: inline-block">推荐专家</p>
      <div class="text-right" style="float: right">
        <p style="display: inline-block">更多</p>
        <p style="display: inline-block;margin-right: 20px;">></p>
      </div>
    </div>
    <div style="height: 243px;">

      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide bgClass" v-for="v in personList">
            <div style="display: inline-block;vertical-align: top">
              <img src="../img/5-1.jpg" style="margin-top: 33px;margin-left: 30px;"/>
            </div>
            <div style="display: inline-block;margin-top: 30px;margin-left: 20px;vertical-align: top">
              <p style=""><span style="font-size: 34px;">{{v.name}}</span> {{v.intro}}</p>
              <p style="">{{v.hospital}}</p>
              <p style="color: #97999b;">{{v.text}}</p>
            </div>
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>


      </div>

    </div>
    <div style="height: 70px;margin-top: 18px;padding-top: 15px;" class="border bgClass">
      <p style="border-left: 3px solid #5997db;margin-left: 30px;padding-left: 10px;display: inline-block">资讯</p>
      <div class="text-right" style="float: right">
        <p style="display: inline-block">更多</p>
        <p style="display: inline-block;margin-right: 20px;">></p>
      </div>
    </div>
    <div style="margin-bottom: 150px;">
      <div style="height: 187px;display: flex;" class="border bgClass" v-for="v in infoList">
        <div style="margin-left: 30px;width: 420px;">
          <p style="line-height: 50px;margin-top: 20px">{{v.text}}</p>
          <p style="font-size: 16px;color: #959595;">{{v.date}}</p>
        </div>
        <div>
          <img src="../img/4-1.jpg" style="margin-top: 20px;margin-left: 40px;"/>
        </div>
      </div>
    </div>


    <div style="position: fixed;bottom: 0;height: 95px;z-index: 99" class="col-xs-12 text-center bgClass fixEa">
      <div class="col-xs-5">
        <div class="col-xs-6">
          <img src="../img/6-1.jpg"/>
          <p>首页</p>
        </div>
        <div class="col-xs-6">
          <img src="../img/6-2.jpg"/>
          <p>商城</p>
        </div>
      </div>
      <div class="col-xs-2">
        <div style="width: 86px;height: 86px;border: 1px solid #d0d0ce;border-radius: 50%;line-height: 66px;margin-top: -20px;" class="bgClass">
          <img src="../img/6-5.jpg"/>
        </div>
      </div>
      <div class="col-xs-5">
        <div class="col-xs-6">
          <img src="../img/6-3.jpg"/>
          <p>消息</p>
        </div>
        <div class="col-xs-6">
          <img src="../img/6-4.jpg"/>
          <p>我的</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    //  上传参数
    data() {
      return {
        topBtn:[
          {imgUrl:require("../img/1.jpg"),text:"预约挂号"},
          {imgUrl:require("../img/2.jpg"),text:"在线药房"},
          {imgUrl:require("../img/3.jpg"),text:"慈善援助"},
          {imgUrl:require("../img/4.jpg"),text:"床位预约"},
        ],
        topBtn2:[
          {imgUrl:require("../img/1-1.jpg"),text:"用药提醒"},
          {imgUrl:require("../img/1-2.jpg"),text:"健康档案"},
          {imgUrl:require("../img/1-3.jpg"),text:"健康自测"},

        ],
        infoList:[
          {imgUrl:require("../img/4-1.jpg"),text:"西南医院sadf发送到暗室逢灯撒旦法",date:"2017-12-27 12:23:00"},
          {imgUrl:require("../img/4-1.jpg"),text:"西南医院sadf发送到暗室逢灯撒旦法",date:"2017-12-27 12:23:00"},
          {imgUrl:require("../img/4-1.jpg"),text:"西南医院sadf发送到暗室逢灯撒旦法",date:"2017-12-27 12:23:00"},
          {imgUrl:require("../img/4-1.jpg"),text:"西南医院sadf发送到暗室逢灯撒旦法",date:"2017-12-27 12:23:00"},
        ],
        personList:[
          {name:"张曦",intro:"主任医师 教授 博士研究生导师",hospital:"陆军军医大发电费收费 血液科",text:"陆军军医大发电费收费"},
          {name:"张曦",intro:"主任医师 教授 博士研究生导师",hospital:"陆军军医大发电费收费 血液科",text:"陆军军医大发电费收费"},
          {name:"张曦",intro:"主任医师 教授 博士研究生导师",hospital:"陆军军医大发电费收费 血液科",text:"陆军军医大发电费收费"},
        ]
      }
    },
    mounted(){
      var mySwiper = new Swiper ('.swiper-container', {
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
      })
    },
    components:{
    },
    methods: {
      add(){
        this.$store.commit("increment",900)
      }
    },

  }
</script>

<style scoped>
  .border{
    border-top: 1px solid #d0d0ce;
    border-bottom: 1px solid #d0d0ce;
  }
  p{
    font-size: 28px;
  }
  .bgClass{
    background-color: white;
  }
  .swiper-container {
    height: 243px;
  }
  .fixEa p{
    font-size: 21px;
    margin-top: 15px;
  }
  .fixEa img{
    margin-top: 13px;
  }
</style>
